<style>

    .page-title {
        text-align: center;
        margin-bottom: 2.5rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid #eee;
    }

    .alert-category {
        margin-bottom: 3rem;
    }

    .category-header {
        font-size: 1.4rem;
        margin-bottom: 1.5rem;
        color: var(--dark);
        padding-left: 0.5rem;
        border-left: 4px solid var(--primary);
    }

    .alert-demo {
        margin-bottom: 3rem;
        position: relative;
    }

    .alert-description {
        margin-top: 1rem;
        padding: 1rem;
        font-size: 0.95rem;
        color: #666;
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    /* 全屏提示基础样式 */
    .fullscreen-alert {
        position: relative;
        min-height: 300px;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 2rem;
        border-radius: 12px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        text-align: center;
        transition: all 0.3s ease;
    }

    .fullscreen-alert:hover {
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }

    .fullscreen-alert .icon {
        font-size: 4rem;
        margin-bottom: 1.5rem;
        opacity: 0.9;
    }

    .fullscreen-alert .title {
        font-size: 1.8rem;
        font-weight: 600;
        margin-bottom: 1rem;
    }

    .fullscreen-alert .message {
        font-size: 1rem;
        max-width: 600px;
        margin-bottom: 2rem;
        line-height: 1.6;
    }

    .fullscreen-alert .actions {
        display: flex;
        gap: 1rem;
        margin-top: 1rem;
    }

    .fullscreen-alert .btn {
        padding: 0.6rem 1.5rem;
        font-size: 1rem;
        border-radius: 6px;
        transition: all 0.2s ease;
    }

    /* 不同类型全屏提示 */
    .alert-primary-full {
        background-color: var(--primary);
        color: white;
    }

    .alert-success-full {
        background-color: var(--success);
        color: white;
    }

    .alert-info-full {
        background-color: var(--info);
        color: var(--dark);
    }

    .alert-warning-full {
        background-color: var(--warning);
        color: var(--dark);
    }

    .alert-danger-full {
        background-color: var(--danger);
        color: white;
    }

    .alert-light-full {
        background-color: var(--light);
        color: var(--dark);
        border: 1px solid #e9ecef;
    }

    .alert-dark-full {
        background-color: var(--dark);
        color: white;
    }

    /* 特殊效果全屏提示 */
    .alert-gradient {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

    .alert-pattern {
        background-color: var(--primary);
        color: white;
        background-image: radial-gradient(rgba(255, 255, 255, .15) 2px, transparent 2px),
        radial-gradient(rgba(255, 255, 255, .15) 2px, transparent 2px);
        background-size: 30px 30px;
        background-position: 0 0, 15px 15px;
    }

    .alert-outline-full {
        background-color: transparent;
        border: 3px solid var(--primary);
        color: var(--primary);
    }

    /* 响应式调整 */
    @media (max-width: 768px) {
        .fullscreen-alert {
            min-height: 250px;
            padding: 1.5rem;
        }

        .fullscreen-alert .icon {
            font-size: 3rem;
            margin-bottom: 1rem;
        }

        .fullscreen-alert .title {
            font-size: 1.5rem;
        }

        .fullscreen-alert .actions {
            flex-direction: column;
            width: 100%;
        }

        .fullscreen-alert .btn {
            width: 100%;
        }
    }
</style>

<div class="container">
    <h1 class="page-title">全屏消息提示样式展示</h1>

    <!-- 基础全屏提示 -->
    <div class="alert-category">
        <h2 class="category-header">基础全屏提示</h2>

        <div class="alert-demo">
            <div class="fullscreen-alert alert-success-full">
                <div class="icon">
                    <i class="fas fa-check-circle"></i>
                </div>
                <div class="title">操作成功</div>
                <div class="message">您的设置已成功保存，所有更改将立即生效。感谢您的使用。</div>
                <div class="actions">
                    <button class="btn btn-light">返回首页</button>
                    <button class="btn btn-transparent border border-white">查看详情</button>
                </div>
            </div>
            <p class="alert-description">成功类全屏提示 - 绿色背景，用于展示操作成功的反馈信息，包含图标、标题、详细信息和操作按钮</p>
        </div>

        <div class="alert-demo">
            <div class="fullscreen-alert alert-danger-full">
                <div class="icon">
                    <i class="fas fa-exclamation-circle"></i>
                </div>
                <div class="title">操作失败</div>
                <div class="message">很抱歉，您的操作未能完成。请检查网络连接后重试，或联系客服获取帮助。</div>
                <div class="actions">
                    <button class="btn btn-light">重试</button>
                    <button class="btn btn-transparent border border-white">联系客服</button>
                </div>
            </div>
            <p class="alert-description">错误类全屏提示 - 红色背景，用于展示操作失败的反馈信息，提供重试和客服支持选项</p>
        </div>
    </div>

    <!-- 信息类全屏提示 -->
    <div class="alert-category">
        <h2 class="category-header">信息类全屏提示</h2>

        <div class="alert-demo">
            <div class="fullscreen-alert alert-info-full">
                <div class="icon">
                    <i class="fas fa-info-circle"></i>
                </div>
                <div class="title">系统提示</div>
                <div class="message">您的账户安全设置已更新，建议您定期修改密码以保障账户安全。</div>
                <div class="actions">
                    <button class="btn btn-dark">我知道了</button>
                    <button class="btn btn-outline-dark">立即修改密码</button>
                </div>
            </div>
            <p class="alert-description">信息类全屏提示 - 青色背景，用于展示系统通知和建议信息</p>
        </div>

        <div class="alert-demo">
            <div class="fullscreen-alert alert-warning-full">
                <div class="icon">
                    <i class="fas fa-exclamation-triangle"></i>
                </div>
                <div class="title">警告提示</div>
                <div class="message">您的存储空间即将用尽，剩余空间不足10%。请清理不必要的文件或升级存储空间。</div>
                <div class="actions">
                    <button class="btn btn-dark">稍后提醒</button>
                    <button class="btn btn-danger">立即清理</button>
                </div>
            </div>
            <p class="alert-description">警告类全屏提示 - 黄色背景，用于展示需要用户注意的警告信息</p>
        </div>
    </div>

    <!-- 特殊样式全屏提示 -->
    <div class="alert-category">
        <h2 class="category-header">特殊样式全屏提示</h2>

        <div class="alert-demo">
            <div class="fullscreen-alert alert-gradient">
                <div class="icon">
                    <i class="fas fa-gift"></i>
                </div>
                <div class="title">新功能上线</div>
                <div class="message">我们很高兴地宣布，全新版本已正式发布！包含多项功能改进和体验优化。</div>
                <div class="actions">
                    <button class="btn btn-light">了解新功能</button>
                    <button class="btn btn-transparent border border-white">稍后再说</button>
                </div>
            </div>
            <p class="alert-description">渐变背景全屏提示 - 用于重要公告和新功能发布，视觉效果更突出</p>
        </div>

        <div class="alert-demo">
            <div class="fullscreen-alert alert-outline-full">
                <div class="icon">
                    <i class="fas fa-question-circle"></i>
                </div>
                <div class="title">确认操作</div>
                <div class="message">您确定要删除此项目吗？此操作不可撤销，删除后所有相关数据将被永久移除。</div>
                <div class="actions">
                    <button class="btn btn-secondary">取消</button>
                    <button class="btn btn-primary">确认删除</button>
                </div>
            </div>
            <p class="alert-description">轮廓式全屏提示 - 透明背景搭配边框，用于重要操作的确认提示</p>
        </div>

        <div class="alert-demo">
            <div class="fullscreen-alert alert-pattern">
                <div class="icon">
                    <i class="fas fa-clock"></i>
                </div>
                <div class="title">系统维护</div>
                <div class="message">系统将于今日23:00-次日02:00进行维护，期间可能无法正常使用。敬请谅解。</div>
                <div class="actions">
                    <button class="btn btn-light">知道了</button>
                    <button class="btn btn-transparent border border-white">查看详情</button>
                </div>
            </div>
            <p class="alert-description">图案背景全屏提示 - 带轻微图案的背景，用于系统维护等计划性通知</p>
        </div>
    </div>

    <!-- 简洁型全屏提示 -->
    <div class="alert-category">
        <h2 class="category-header">简洁型全屏提示</h2>

        <div class="alert-demo">
            <div class="fullscreen-alert alert-light-full">
                <div class="icon">
                    <i class="fas fa-spinner fa-spin"></i>
                </div>
                <div class="title">加载中</div>
                <div class="message">请稍候，我们正在处理您的请求...</div>
            </div>
            <p class="alert-description">加载状态全屏提示 - 简洁的加载状态展示，无操作按钮</p>
        </div>

        <div class="alert-demo">
            <div class="fullscreen-alert alert-dark-full">
                <div class="title">访问受限</div>
                <div class="message">您没有权限访问此内容，请登录有权限的账户或联系管理员。</div>
                <div class="actions">
                    <button class="btn btn-light">登录</button>
                </div>
            </div>
            <p class="alert-description">权限提示全屏提示 - 深色背景，简洁展示权限不足的提示</p>
        </div>
    </div>
</div>


<script>
	document.addEventListener('DOMContentLoaded', function () {
		// 为所有全屏提示添加点击效果
		const alerts = document.querySelectorAll('.fullscreen-alert');
		alerts.forEach(alert => {
			alert.addEventListener('click', function (e) {
				// 避免点击按钮时触发
				if (!e.target.closest('.btn')) {
					this.style.transform = 'scale(0.99)';
					setTimeout(() => {
						this.style.transform = 'scale(1)';
					}, 150);
				}
			});
		});

		// 按钮交互效果
		const buttons = document.querySelectorAll('.fullscreen-alert .btn');
		buttons.forEach(button => {
			button.addEventListener('click', function () {
				const alertTitle = this.closest('.fullscreen-alert').querySelector('.title').textContent;
				console.log(`点击了【${alertTitle}】中的【${this.textContent.trim()}】按钮`);
			});
		});

		// 页面滚动动画
		const animateOnScroll = () => {
			const demos = document.querySelectorAll('.alert-demo');
			demos.forEach((demo, index) => {
				const demoTop = demo.getBoundingClientRect().top;
				const triggerBottom = window.innerHeight * 0.7;

				if (demoTop < triggerBottom) {
					demo.style.opacity = '1';
					demo.style.transform = 'translateY(0)';
				}
			});
		};

		// 初始化样式
		const demos = document.querySelectorAll('.alert-demo');
		demos.forEach((demo, index) => {
			demo.style.opacity = '0';
			demo.style.transform = 'translateY(30px)';
			demo.style.transition = `opacity 0.6s ease ${index * 0.15}s, transform 0.6s ease ${index * 0.15}s`;
		});

		// 初始加载和滚动时触发动画
		window.addEventListener('load', animateOnScroll);
		window.addEventListener('scroll', animateOnScroll);
	});
</script>
